<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>元素从中间展开</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        li{
            list-style:none;
        }
        #noWidth,#noHeight{
            border:1px solid #000;
            display:none;
            position:absolute;
            top:200px;
            overflow:hidden;
        }
        #noWidth{
            width:0px;
            height:100px;
            left:200px;
        }
        #noHeight{
            width:300px;
            height:0px;
            left:400px;
            top:250px;
        }
        #noWidth ul li,#noHeight ul li{
            width:100%;
            height:20px;
            font-size:12px;
            text-align:center;
        }
    </style>
</head>
<body>
<div id="noWidth">
    <ul>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
    </ul>
</div>
<div id="noHeight">
    <ul>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
        <li>元素从中间展开</li>
    </ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){
        var timer1=null;
        var timer2=null;
        var mydiv1=document.getElementById('noWidth');
        var mydiv2=document.getElementById('noHeight');
        mydiv1.style.display='block';
        mydiv2.style.display='block';
        var oL1=mydiv1.offsetLeft;
        var oT2=mydiv2.offsetTop;
        function changeW(w){
            timer1=setInterval(function(){
                if(mydiv1.offsetWidth>=w){
                    clearInterval(timer1);
                }else{
                    mydiv1.style.width=mydiv1.offsetWidth+5+'px';//这一块计算要注意！！！
                    mydiv1.style.left=oL1-mydiv1.offsetWidth/2+'px';
                }
            },10);
        }
        changeW(300);
        function changeH(h){
            timer2=setInterval(function(){
                if(mydiv2.offsetHeight>=h){
                    clearInterval(timer2);
                }else{
                    mydiv2.style.height=mydiv2.offsetHeight+2+'px';//这一块计算要注意！！！
                    mydiv2.style.top=oT2-mydiv2.offsetHeight/2+'px';
                }
            },10);
        }
        changeH(100);
    });
</script>
</html>